【我可以你也可以的Node.js】第二一篇 - 如何使用 Socket.io 讓你的網頁不用 reload 也可以隨時更新資料

node.js w3hexschool socket.io websocket

Robin 2020-08-16 01:30:03 ‧ 7999 瀏覽

分享至

嗨，各位好我是 Robin ~

你有想過為什麼有些網站的資料，
你明明沒有重新整理資料那些資料卻會自己更新嗎？
(例如一些虛擬貨幣交易所的匯率或是一些股票市場的價格走勢)

答案是他們直接用 Javascript 做在前端直接 Random 或是寫死啊！
沒有在跟後端要資料的啦！

開玩笑的
(不過大部分詐騙網站或是一些主要以飢餓行銷手法的網站都是這樣做)
比方說...
網頁上顯示超值特價限時 10 分鐘，然後時間正在一分一秒流逝，
當你腦波一微弱單子就出去了，
但是當你下單完成回頭重新整理一次 10 分鐘又重新計算了，
想必你的心情會是...

基本上 Socket.io 他就是基於 EventEmitter 來提供給 Client 端來使用 Websocket。
如果還不知道 EventEmitter的同學可以參考我之前寫的文章，
讓你輕鬆且快樂的學習~
【我可以你也可以的Node.js】第七篇 - 第一次用EventEmiter就用來做壞壞的事ヽ(́◕◞౪◟◕‵)ﾉ

其實操作方面主要也只有兩個
就跟 EventEmitter 一樣幾乎都圍繞在 on 和 emit，
先看一下成果~

基本上我就只是後端建立完連線之後，
每秒從後端送出一筆亂數讓前端 show 出來。

那我們幹話繼續說直接看 Code 吧

建立一個 socket.js

const http = require("http");
const url = require('url');
const fs = require('fs');
const io = require('socket.io');

const server = http.createServer(function(request, response) {
    console.log('Connection');
    const path = url.parse(request.url).pathname;

    switch (path) {
        case '/':
            response.writeHead(200, { 'Content-Type': 'text/html' });
            response.write('I don\'t need to reload~');
            response.end(); d
            break;
        case '/socket.html':
            fs.readFile(__dirname + path, function(error, data) {
                if (error) {
                    response.writeHead(404);
                    response.write("opps this doesn't exist - 404");
                } else {
                    response.writeHead(200, { "Content-Type": "text/html" });
                    response.write(data, "utf8");
                }
                response.end();
            });
            break;
        default:
            response.writeHead(404);
            response.write("opps this doesn't exist - 404");
            response.end();
            break;
    }
});

server.listen(8080);

const serv_io = io.listen(server);

serv_io.sockets.on('connection', function(socket) {
    setInterval(() => {
        socket.emit('randomNum', { 'message': Math.random() * 100 });
    }, 1000)
});

這邊主要的重點在這段

const serv_io = io.listen(server);

serv_io.sockets.on('connection', function(socket) {
    setInterval(() => {
        socket.emit('randomNum', { 'message': Math.random() * 100 });
    }, 1000)

當連線連上之後設定定時器一秒鐘送出一個 randomNum的事件出去。

接著，建立一個 socket.html

<html>

<head>
    <script src="/socket.io/socket.io.js"></script>
</head>

<body>
    <script>
        var socket = io.connect();
        socket.on('randomNum', function(data) {
            console.log(data.message);
            document.getElementById('viewText').innerText = `I don't need to reload~\n${data.message}`;
        });
    </script>
    <p id=viewText> I don't need to reload~
    </p>
</body>

</html>

這邊主要的重點是在於前端透過 socket.io 接收到 randomNum 這個事件然後更新 tag p 的內容。

所以由此可知，這年頭景氣不好啊賣東西都要搞心理戰了(重點錯誤)

希望以上範例可以讓正在讀的你能更好理解其實要實作 websocket 讓網頁動態呈現資料不是那麼難的一件事。
但也許是我還碰得不夠深xD

感覺這部分可以有很多的應用，
像我第一個想法就是可以透過這個來做個聊天室，
如果正在讀的你不知道他能幹嘛，
不仿想想看如何用利用這個實作一個專案，
讓你不僅能更理解還能獲得成就感。
也許你就能...